<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>拖拽模块练习</title>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="https://jiqiren.icehot.cc/yl/jquery-ui.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/index.css"/>
		<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
		<script src="https://jiqiren.icehot.cc/yl/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="CentData">
			<div class="CentData-left">
				<div class="Title">
					可以拖拽的模块
				</div>
				<div class="BottomCent">
					<div class="mokuai draggable ui-widget ui-widget-content">
						模块1)
					</div>
				</div>
			</div>
			<div class="CentData-right">
				<div class="Title">
					拖拽模块后生成的内容
				</div>
				<div class="BottomData">
					<div class="cent">
						内容区域111
					</div>
					<div class="cent">
						内容区域222
					</div>
					<div class="cent">
						内容区域333
					</div>
				</div>
			</div>
			<div><input class="sub" type="button" name="" value="一键生成代码！"></div>
		</div>
		<script type="text/javascript">
			var StringTxt='<div class="demo cent">这是添加进来的新模块</div>';
			function move(){
				for(var k=0;k<$(".BottomData>.cent").length;k++){
					var xx = $(".mokuai").offset().left;
					var yy = $(".mokuai").offset().top;
					var left1=$(".BottomData>.cent").eq(k).offset().left;
					var left2=$(".BottomData>.cent").eq(k).offset().left+$(".BottomData>.cent").eq(k).width();
					var top1=$(".BottomData>.cent").eq(k).offset().top;
					var top2=$(".BottomData>.cent").eq(k).offset().top+$(".BottomData>.cent").eq(k).height();
					if(xx>=left1&&xx<=left2&&yy>=top1&&yy<=top2){
			      		$(".BottomData>.cent").eq(k).addClass("redBorder").siblings().removeClass("redBorder");
					}
				}
			}
			function addDiv(){
				for(var k=0;k<$(".BottomData>.cent").length;k++){
					var xx = $(".mokuai").offset().left;
					var yy = $(".mokuai").offset().top;
					var left1=$(".BottomData>.cent").eq(k).offset().left;
					var left2=$(".BottomData>.cent").eq(k).offset().left+$(".BottomData>.cent").eq(k).width();
					var top1=$(".BottomData>.cent").eq(k).offset().top;
					var top2=$(".BottomData>.cent").eq(k).offset().top+$(".BottomData>.cent").eq(k).height();
					if(xx>=left1&&xx<=left2&&yy>=top1&&yy<=top2){
			      		$(".BottomData>.cent").eq(k).after(StringTxt);
					}
				}
			}
			$(".draggable").draggable({
		      start: function(e) {
				console.log("开始拖拽!");
		      },
		      drag: function(e) {
				console.log("拖拽过程!");
				move();
		      },
		      stop: function(e) {
				console.log("停止拖拽!");
	      		$(".BottomData>.cent").removeClass("redBorder");
//				停止后将拖拽的Div定位全部回归原位
				$(".mokuai").animate({left:'0',top:'0'},300);
				addDiv();
		      }
		   });
		   var MenuDiv='<div class="releaveDome"><div class="EditDemo"><div class="Delete">删除</div><div class="Edit">编辑</div></div></div>';
		   $(document).on("click",".BottomData>.cent",function(){
				$(this).append(MenuDiv);
				return false;
		   });
//		    $(document).on("click",".Edit",function(){
//				$(this).parents(".cent").attr("contenteditable","true");
//				return false;
//		   });
		    $(document).on("click",".Delete",function(){
				$(this).parents(".cent").remove();
				return false;
		   });

		    
							//console.log(headtext);

		    $(".sub").click(function(){
		    	
		    	var htmlaa=$(".BottomData").html();
		    	var headtext='<!DOCTYPE html>'+
						'<html>'+
						'<head>'+
						'<meta charset="utf-8" />'+
						'<title>拖拽模块练习</title>'+
						'<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/reset.css"/>'+
						'<link rel="stylesheet" type="text/css" href="https://jiqiren.icehot.cc/yl/jquery-ui.css"/>'+
						'<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/index.css"/>'+
						'<script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"><\/script>'+
						'<script src="https://jiqiren.icehot.cc/yl/jquery-ui.js" type="text/javascript" charset="utf-8"><\/script>'+
						'</head>'+
						'<body>'+htmlaa+
						'</body>'+
						'</html>';
						console.log(headtext);

		    	$.ajax({
                    type: "post",
                    url: "/index.php/Home/Index/shengchen",
                    data: {'htmlaa':headtext},
                    dataType: "json",
                    success:function(data){
                    	console.log(data);
                    },

                    error : function() {
                        alert("异常！");
                    }
                });
		    })
		</script>
	</body>
</html>